<template>
	<view class="section">
		<view class="label">
			区间
		</view>
		<view class="secs">
			<view class="sec-btn" v-for="(item, index) in sections" :key="item.key" @click="secChose(item, index)" :class="{'checked':index === active}">
				{{item.value}}
			</view>
		</view>
	</view>
</template>

<script>
	import { sections } from '../../utils/data.js'
	export default {
		data() {
			return {
				sections,
				active: 0
			};
		},
		methods: {
			secChose(item, i) {
				this.active = i
				this.$emit('secChose', item)
			}
		}
	}
</script>

<style>
.section {
	display: flex;
}
.label {
	font-size:24upx;
	font-weight:400;
	color:rgba(234,10,42,1);
	margin: 0 0 0 19upx;
	width: 62upx;
	flex: 1 62upx 0;
	transform: translateY(12upx);
}
.secs {
	font-size:22upx;
	font-weight:400;
	color:rgba(102,102,102,1);
	flex: 8;
}
.sec-btn {
	width:150upx;
	height:54upx;
	background:rgba(255,255,255,1);
	border-radius:4upx;
	line-height: 54upx;
	text-align: center;
	margin: 0 16upx 15upx 0;
	display: inline-block;
}
.checked {
	background: url(../../static/img/sec_label.png) center center no-repeat;
	background-size: contain;
	color: #FFFFFF;
}
</style>
